<template>
    <div id="announcement">
        <TopBar :searchOrNot="false"></TopBar>
        <div id="announcementBar">
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(item, index) in announcementData" :key="index" :timestamp="item.time"
                    placement="top" size="large">
                    <div class="content">
                        <p class="theme">{{ item.theme }}</p>
                        <p class="text" v-html="item.content"></p>
                    </div>
                </el-timeline-item>
            </el-timeline>
        </div>
        <NotMore></NotMore>
        <FilingBar></FilingBar>
    </div>
</template>

<script>
import FilingBar from '@/components/reusable/FilingBar.vue';
import TopBar from '@/components/reusable/TopBar.vue'
import NotMore from '@/components/reusable/NotMore.vue';
export default {
    data() {
        return {
            announcementData: [],
            reverse: false, // 排序方向，倒序
        }
    },
    methods: {
        // 获取公告内容
        getAnnouncementData() {
            this.$axios({
                method: 'post',
                url: '/announcement/getAllAnnouncement'
            }).then(res => {
                res.data.forEach(element => { // 分割时间,添加换行
                    element.time = element.time.slice(0, 10)
                    element.content = element.content.replace(/\r\n/g, "<br/>")
                });
                this.announcementData = res.data
                console.log(this.announcementData);
            })
        }
    },
    components: {
        TopBar , NotMore , FilingBar
    },
    mounted() {
        this.getAnnouncementData()
    }
}
</script>

<style lang="scss" scoped>
#announcementBar {
    padding-left: 50px;
}

.content {
    position: relative;
    width: 80%;
    background-color: $color-list;
    padding: 20px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 8px;
    overflow: hidden;
}

.theme {
    color: $color-main-text;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
    margin-bottom: 10px;
    border-bottom: 1px solid $color-background-assistant;
    padding-bottom: 10px;
}

.text {
    margin-bottom: 20px;
    color: $color-text;
}

.time {
    position: absolute;
    bottom: 5px;
    right: 30px;
}
</style>
<style scoped="scope" scope>
/deep/.el-timeline-item__timestamp {
    font-size: large;
    font-weight: 700;
}
</style>